<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据库查询示例 - Spring MVC</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        button {
            padding: 10px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        #result {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            min-height: 50px;
        }
        .loading {
            color: #666;
            font-style: italic;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
<h1>数据库查询示例 - Spring MVC</h1>

<div>
    <label for="queryParam">查询参数：</label>
    <input type="text" id="queryParam" placeholder="输入查询条件">
    <button id="queryBtn">查询</button>
</div>

<div id="result">查询结果将显示在这里...</div>

<script>
    document.getElementById('queryBtn').addEventListener('click', function() {
        const queryParam = document.getElementById('queryParam').value;
        const resultDiv = document.getElementById('result');

        // 显示加载状态
        resultDiv.innerHTML = '<span class="loading">查询中，请稍候...</span>';

        // 发送请求到后端Spring MVC
        fetch('/your-context-path/api/query', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ param: queryParam })
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('网络响应不正常');
            }
            return response.json();
        })
        .then(data => {
            // 显示查询结果
            if (data.success) {
                resultDiv.innerHTML = formatResult(data.data);
            } else {
                resultDiv.innerHTML = `<span style="color:red">错误: ${data.message}</span>`;
            }
        })
        .catch(error => {
            resultDiv.innerHTML = `<span style="color:red">请求失败: ${error.message}</span>`;
        });
    });

    function formatResult(data) {
        if (!data || data.length === 0) {
            return '没有找到匹配的结果';
        }

        // 格式化显示为表格
        if (Array.isArray(data)) {
            if (data.length === 0) return '没有数据';

            // 获取表头
            const headers = Object.keys(data[0]);
            let html = '<table><thead><tr>';

            // 添加表头
            headers.forEach(header => {
                html += `<th>${header}</th>`;
            });
            html += '</tr></thead><tbody>';

            // 添加数据行
            data.forEach(row => {
                html += '<tr>';
                headers.forEach(header => {
                    html += `<td>${row[header] || ''}</td>`;
                });
                html += '</tr>';
            });

            html += '</tbody></table>';
            return html;
        } else {
            return JSON.stringify(data, null, 2);
        }
    }
</script>
</body>
</html>